<template>
    <div class="overview-container">
        <h2>群控功能概览</h2>

        <div class="cards-container">
            <div class="card">
                <div class="card-icon">📨</div>
                <div class="card-content">
                    <h3>消息管理</h3>
                    <p>创建定时消息任务，向群组或用户发送消息</p>
                    <router-link to="/admin/group-control/messages" class="card-link">进入管理 →</router-link>
                </div>
            </div>

            <div class="card">
                <div class="card-icon">🛡️</div>
                <div class="card-content">
                    <h3>敏感词过滤</h3>
                    <p>设置敏感词规则，自动过滤群组中的不良信息</p>
                    <router-link to="/admin/group-control/filter" class="card-link">进入管理 →</router-link>
                </div>
            </div>

            <div class="card">
                <div class="card-icon">🔐</div>
                <div class="card-content">
                    <h3>入群验证</h3>
                    <p>设置入群验证规则，验证新成员是否为真人</p>
                    <router-link to="/admin/group-control/verification" class="card-link">进入管理 →</router-link>
                </div>
            </div>
        </div>

        <div class="feature-list">
            <h3>群控功能介绍</h3>
            <ul>
                <li>
                    <b>定时发送消息：</b>预先设置好消息内容和发送时间，系统会在指定时间自动发送。
                </li>
                <li>
                    <b>批量群发：</b>一次性向多个群组或用户发送相同的消息，提高工作效率。
                </li>
                <li>
                    <b>消息转发：</b>可以转发已有消息到其他群组或用户。
                </li>
                <li>
                    <b>定期重复：</b>支持每天、每周或每月重复发送消息。
                </li>
                <li>
                    <b>敏感词过滤：</b>自动检测和处理群组中的敏感内容，维护良好的聊天环境。
                </li>
                <li>
                    <b>入群验证：</b>通过验证码或自定义问题验证新成员是否为真人，防止机器人批量加群。
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'GroupControlOverview'
}
</script>

<style scoped>
.overview-container {
    padding: 20px;
}

.cards-container {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 20px;
    flex: 1;
    min-width: 250px;
}

.card-icon {
    font-size: 32px;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.card-content {
    flex: 1;
}

.card-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.card-content p {
    color: #666;
    margin-bottom: 15px;
}

.card-link {
    color: #1890ff;
    text-decoration: none;
    font-weight: 500;
}

.feature-list {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
}

.feature-list h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.feature-list ul {
    margin: 0;
    padding-left: 20px;
}

.feature-list li {
    margin-bottom: 10px;
    line-height: 1.5;
}
</style>